<template>
  <div class="page-wrap">
    <div class="search-form">
      <el-form ref="searchFormRef" :model="queryForm" inline size="small">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="queryForm.name" v-trim class="form-width" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryForm.status" class="form-width" clearable>
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-debounce="1000" type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="operate-btns-group">
      <el-button type="primary" @click="handleEdit(null)">新增</el-button>
    </div>
    <el-table
      ref="tableRef"
      :data="tableData"
      border
      class="table"
      :height="tableHeight"
      style="width: 100%">
      <el-table-column prop="name" label="角色名称" min-width="120" show-overflow-tooltip/>
      <el-table-column prop="statusText" label="状态" min-width="80" show-overflow-tooltip/>
      <el-table-column prop="description" label="角色描述描述" min-width="180" show-overflow-tooltip/>
      <el-table-column prop="creator" label="创建者" min-width="100" show-overflow-tooltip/>
      <el-table-column prop="createTime" label="创建时间" min-width="120" show-overflow-tooltip/>
      <el-table-column prop="updator" label="更新者" min-width="80" show-overflow-tooltip/>
      <el-table-column prop="updateTime" label="更新时间" min-width="120" show-overflow-tooltip/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{row}">
          <svg-button
            content="修改"
            icon="Edit"
            is-el-icon
            @click="handleEdit(row)"
          />
          <svg-button
            content="删除"
            icon="Delete"
            is-el-icon
            color="#F56C6C"
            :loading="row.delLoading"
            @click="handleDel(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper, slot"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
      <button text @click="handleRefresh">
        <el-icon :size="20">
          <Refresh />
        </el-icon>
      </button>
    </el-pagination>

    <edit-sample-dialog
      v-model:visible="editSampleDialogData.visible"
      :pdata="editSampleDialogData.data"
      @dialog-confirm-event="handleSearch"/>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { awaitWrap } from '@/utils'
import { SUCCESS_CODE } from '@/constants'
import { ElMessageBox } from 'element-plus'
import { delRole, getRoleList } from '@/api/role-management'
import { useTableCommonData } from '@/composables/table-common'
import EditSampleDialog from './EditRoleDialog.vue'
import SvgButton from '@/components/SvgButton/index.vue'
import { getTextByEnum } from '@/utils/enum'

// 生命周期函数
onMounted(() => {
  handleSearch()
})

// 组件实例
const tableRef = ref()

// ---------------------------获取表格数据---------------------
// 表格查询项的初始数据
const query = {
  name: null,
  status: null
}
// 设置提交参数
const setParams = () => {
  return {
    fname: queryFormSubmit.value.name,
    fstatus: queryFormSubmit.value.status
  }
}
// 获取表格参数
const getTableData = async () => {
  const params = {
    ...setParams(),
    currentPage: currentPage.value,
    pageSize: pageSize.value
  }
  const { res } = await awaitWrap(getRoleList(params, { loadingDom: '.table' }))
  if (res?.statusCode === SUCCESS_CODE) {
    const rows = res.data?.rows || []
    total.value = res.data?.total || 0
    tableData.value = []
    rows.forEach(v => {
      const item = {
        fid: v.fid,
        name: v.fname,
        status: v.fstatus,
        statusText: getTextByEnum(v.fstatus, 'BOOLEAN_STATUS_ENUM'),
        description: v.fdescription,
        creator: v.fcreator,
        createTime: v.fcreateTime,
        updator: v.fupdator,
        updateTime: v.fupdateTime
      }
      tableData.value.push(item)
    })
  }
}

// 表格基础数据
const {
  tableData,
  currentPage,
  pageSize,
  pageSizes,
  total,
  queryForm,
  queryFormSubmit,
  tableHeight,
  handleSearch,
  handleReset,
  handleSizeChange,
  handleCurrentChange,
  handleRefresh
} = useTableCommonData({ query, getTableDataFn: getTableData })

// ---------------------按钮交互操作相关内容-------------------
// 编辑样本弹窗数据
const editSampleDialogData = reactive({
  data: null,
  visible: false
})
// 编辑
const handleEdit = row => {
  editSampleDialogData.data = row ? { ...row } : null
  editSampleDialogData.visible = true
}

const handleDel = async row => {
  const msg = `确定删除${row.name}吗？`
  await ElMessageBox.confirm(msg, '提示')
  row.delLoading = true
  const { res } = await awaitWrap(delRole(row.fid))
  if (res?.success) {
    handleSearch()
  }
  row.delLoading = false
}

// 表格基础方法

</script>

<style lang="scss">
.form-width{
  width: 200px;
}
</style>
